<template>
  <div class="app-container">
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span style="font-weight: bold">表单基础信息</span>
      </div>
      <div>
        <el-descriptions>
          <el-descriptions-item label="业务类型"> <dict-tag :options="dict.type.bus_flow_type" :value="formInfo.bizType"/></el-descriptions-item>
          <el-descriptions-item label="表单类型">{{formInfo.formType==1?'业务':'审批'}}</el-descriptions-item>
          <el-descriptions-item label="表单名称">{{formInfo.formName}}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>

    <el-card class="box-card" style="margin-top: 20px" shadow="never">
      <div slot="header" class="clearfix">
        <span style="font-weight: bold">表单具体内容</span>
      </div>
      <div>
        <template v-if="formInfo.formType==2">
          <custom-form v-if="formList.length>0" disabled :form-list="formList"></custom-form>
          <el-empty v-else description="表单为空"></el-empty>
        </template>
        <template v-else>
          这个每个业务模块抽离出来的组件,待每个业务模块做完后统一处理
        </template>

      </div>
    </el-card>
  </div>
</template>

<script>
import CustomForm from "@/components/CustomForm/customForm.vue";
import {detail} from "@/api/formConfig/formDefinition";
export default {
  dicts: ['bus_flow_type', 'field_type'],
  name:'FormDetail',
  components: {
    CustomForm
  },
  props: {},
  data() {
    return {
      formList:[],
      formInfo:{}
    }
  },
  methods: {
    getDetail(){
      detail(this.$route.query.id).then(res=>{
        this.formInfo = res.data;
        this.formList = JSON.parse(this.formInfo.customForm);
        console.log('formlist-----', this.formList)
      })
    },
  },
  created() {
    this.getDetail()
  },

}
</script>

<style lang="scss" scoped>
</style>
